<template>
    <el-container class="screen-body">
        <el-header style="height: 62px;">
          <div class="screen-header">
              <div class="screen-header-title"> {{ header }} </div>
              <div class="screen-header-time">
                  <span class="screen-header-time-number">{{ newTime.year }}</span>
                  <span class="screen-header-time-text">年</span>
                  <span class="screen-header-time-number">{{ newTime.mouth }}</span>
                  <span class="screen-header-time-text">月</span>
                  <span class="screen-header-time-number">{{ newTime.day }}</span>
                  <span class="screen-header-time-text header-day">日</span>
                  <span class="screen-header-time-number">{{ time }}</span>
              </div>
          </div>
        </el-header>
        <el-main class="screen-main">
          <el-row style="margin-top: 24px">
              <div class="screen-data-title"> 
                  本科生报到人数
              </div>
          </el-row>
          <el-row class="margin-top-16">
              <div class="screen-data-number screen-undergraduate-color">{{formData.undergraduateRegisterCount[0]}}</div>
              <div class="screen-data-number screen-undergraduate-color margin-left-16">{{formData.undergraduateRegisterCount[1]}}</div>
              <div class="screen-data-number screen-undergraduate-color margin-left-16">{{formData.undergraduateRegisterCount[2]}}</div>
              <div class="screen-data-number screen-undergraduate-color margin-left-16">{{formData.undergraduateRegisterCount[3]}}</div>
              <div class="screen-student-sum">
                  <span class="screen-title-02">总人数</span>
                  <div class="screen-student-val screen-undergraduate-color">{{formData.undergraduateTotalCount}}</div>
              </div>
              <div class="screen-student-rate">
                  <span class="screen-title-02">报到率</span>
                  <div class="screen-student-val screen-undergraduate-color">{{formData.undergraduateRegisterRate | percentage}}</div>
              </div>
          </el-row>
          <el-row style="margin-top: 24px">
              <div class="screen-data-title"> 
                  研究生报到人数
              </div>
          </el-row>
          <el-row class="margin-top-16">
              <div class="screen-data-number screen-postgraduate-color">{{formData.postgraduateRegisterCount[0]}}</div>
              <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCount[1]}}</div>
              <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCount[2]}}</div>
              <div class="screen-data-number screen-postgraduate-color margin-left-16">{{formData.postgraduateRegisterCount[3]}}</div>
              <div class="screen-student-sum">
                  <span class="screen-title-02">总人数</span>
                  <div class="screen-student-val screen-postgraduate-color">{{formData.postgraduateTotalCount}}</div>
              </div>
              <div class="screen-student-rate">
                  <span class="screen-title-02">报到率</span>
                  <div class="screen-student-val screen-postgraduate-color">{{formData.postgraduateRegisterRate | percentage}}</div>
              </div>
          </el-row>
        </el-main>
    </el-container>
</template>

<script>
import ScreenHeader from "./screenHeader";
import screenApi from "common/src/api/screen";
import filters from "common/src/filters";
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'
export default {
  name: "ScreenPageSimple",
  components: {
    ScreenHeader,
  },
  data() {
    return {
      newTime:{
        year:'',
        mouth:'',
        day:'',
      },
      newData:'',
      formData: {
        undergraduateRegisterCount: "0000",
        undergraduateTotalCount: 0,
        undergraduateRegisterRate: 0.00,
        postgraduateRegisterCount: "0000",
        postgraduateTotalCount: 0,
        postgraduateRegisterRate: 0.00
      },
      formDataTimer: undefined,
      header: (new Date()).getFullYear() + "级新生报到情况统计",
      headerTimer: undefined,
      year: "",
      mouth: "",
      day: "",
      time: ""
    };
  },
  filters: {
    percentage(rate) {
      return filters.percentage(rate);
    }
  },
  methods: {
    getTime(){
       comRegistration.getCurrentDateStr().then(res => {
          if(res.code == 200){
              this.newData = res.data
              let dateArray = res.data.split(' ')[0]
              let timeArray = res.data.split(' ')[1]
              dateArray = dateArray.split('/') // 日期数组
              timeArray = timeArray.split(':') // 时间数组
              this.newTime = {
                year : dateArray[0],
                mouth :dateArray[1],
                day : dateArray[2]
              }
          }
       })
    },
    showNowTime() {
      let nowTime = new Date();
      // this.year = nowTime.getFullYear();
      // this.mouth = String(nowTime.getMonth()+1).padStart(2, "0");
      // this.day = String(nowTime.getDate()).padStart(2, "0");
      this.time = String(nowTime.getHours()).padStart(2, "0") + ":" + String(nowTime.getMinutes()).padStart(2, "0");
    },
    changeBackendData(data) {
      let formData = data;
      // 本科生报到人数
      formData.undergraduateRegisterCount = String(
        data.undergraduateRegisterCount
      ).padStart(4, "0");
      // 研究生报到人数
      formData.postgraduateRegisterCount = String(
        data.postgraduateRegisterCount
      ).padStart(4, "0");

      return formData;
    },
    init() {
      screenApi
        .findStudentRegisterInfo(1)
        .then(
          response => {
            if (response.code === 200) {
              this.formData = this.changeBackendData(response.data);
            }
          },
          error => {
            // 数据保存为上一次请求的数据。
          }
        )
        .catch(error => {
          // 数据保存为上一次请求的数据。
        });
    }
  },
  created: function() {
    this.showNowTime();
    this.headerTimer = window.setInterval(this.showNowTime, 1000);
    this.getTime()
  },
  destroyed() {
    if (this.headerTimer) {
      window.clearInterval(this.headerTimer);
    }
    if (this.formDataTimer) {
      window.clearInterval(this.formDataTimer);
    }
    this.headerTimer = undefined
    this.formDataTimer = undefined
  },
  mounted() {
    this.init();
    this.formDataTimer = window.setInterval(this.init, 5000);
  }
};
</script>

<style scoped>
/* 头部样式 */
.screen-header {
  background: url("/static/images/screenSimple/bg_head.png");
  height: 62px;
  width: 800px;
}

.screen-header-title {
  float: left;
  line-height: 60px;
  font-size: 24px;
  color: #FFFFFF;
  margin-left: 32px;
}
.screen-header-time {
  float: right;
  margin-right: 32px;
  line-height: 60px;
}
.screen-header-time-number {
  font-size: 24px;
  color: #3bbffd;
}
.screen-header-time-text {
  font-size: 24px;
  color: #c4cce3;
  margin: 0 2px;
}
.header-day {
  margin-right: 10px;
}

/* body部样式 */
.screen-body {
  background: url("/static/images/screenSimple/bg_body.png") center center no-repeat;
  width: 800px;
  height: 515px;
}

.screen-data-title {
  background: url("/static/images/screenSimple/bg_title.png");
  width: 208px;
  height: 52px;
  font-size: 20px;
  line-height: 52px;
  text-align: center;
  color: #c4cce3;
}

.screen-title-02 {
  color: #c4cce3;
  font-size: 24px;
  line-height: 48px;
}

.screen-data-number {
  float: left;
  background: url("/static/images/screenSimple/bg_numberBig.png");
  width: 80px;
  height: 104px;
  font-size: 80px;
  text-align: center;
  line-height: 104px;
}

.screen-main {
  margin-left: 32px;
}
.el-header,
.el-main {
  padding: 0px;
}

.screen-student-sum {
  float: left;
  margin-left: 32px;
  height: 104px;
  width: 144px;
}

.screen-student-rate {
  float: left;
  margin-left: 16px;
  height: 104px;
  width: 144px;
}

.screen-student-val {
  background: url("/static/images/screenSimple/bg_numberTotal.png");
  background-position: center;
  background-repeat: no-repeat;
  width: 144px;
  font-size: 32px;
  text-align: center;
  height: 56px;
  line-height: 56px;
}

</style>
